<template>
	<view class="content">
		<u-swiper :list="bannerList" :effect3d="true" @click="clickBanner" height="20vh" bg-color="#e7f6ff"
			img-mode="aspectFit">
		</u-swiper>
		<view class="search">
			<u-search bg-color="#fff" v-model="searchValue" shape="round" placeholder="请输入女生说的话" :clearabled="true"
				:show-action="true" @search="search" :input-style="inputStyle" @custom="getLoveChat" @clear="clear"
				:action-style="searchStyle" />
		</view>
		<view class="tag" v-if="!list.length">
			<view class="tag-circle">
				<u-tag text="每天开心" shape="circle" @click="tagClick('每天开心')" />
				<u-tag text="土味情话" shape="circle" color="#ff0000" @click="tagClick('土味情话')" />
				<u-tag text="我喜欢你" shape="circle" @click="tagClick('我喜欢你')" />
			</view>
		</view>
		<scroll-view class="list" scroll-y="true" @scrolltolower="tolower">
			<view v-for="item in list" :key="item.female" class="item">
				<view class="title">
					<u-icon :style="iconStyle" size="1.5rem" name="/static/imgs/question.png" />:
					<text class="female">{{item.female}}</text>
				</view>
				<view class="answer" v-for="answer in item.answers" :key="answer.answer">
					<u-icon :style="iconStyle" v-if="answer.gender==1" size="1.5rem" name="/static/imgs/man.png" />
					<u-icon :style="iconStyle" v-if="answer.gender==2" size="1.5rem" name="/static/imgs/woman.png" />
					<text class="answerItem">: {{answer.answer}}</text>
					<u-button class="answerBtn" type="primary" plain size="mini" @click="copy(answer,item)">复制
					</u-button>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		toRefs,
		reactive,
		onMounted
	} from 'vue'
	import api from '../../axios/http.api.js'
	export default {
		name: 'index',
		setup() {
			const state = reactive({
				// 输入框的值
				searchValue: '',
				// 输入框样式
				searchStyle: {
					color: '#ff0000',
					fontWeight: '500',
					padding: '1px 2px',
					borderRadius: '15%',
					fontSize: '15px',
					backgroundColor: 'rgba(255, 255, 0, 0.3)'
				},
				inputStyle: {
					height: '30rpx',
					width: '450rpx'
				},
				// 图标样式
				iconStyle: {
					position: 'relative',
					top: '6px'
				},
				// 话术列表
				list: [],
				loading: false,
				// banner图片数组
				bannerList: [],
				page: 1,
			})
			const methods = reactive({
				search() {
					state.page = 1
					state.list = []
					methods.getLoveChat()
				},
				// 获取话术列表
				getLoveChat: async () => {
					if (!state.searchValue) {
						uni.showToast({
							title: '请输入话术关键词',
							icon: 'none',
							position: 'top'
						})
						return
					}
					state.loading = true
					let res = await api.getLoveChat({
						count: 16,
						key: state.searchValue,
						page: state.page
					})
					state.loading = false
					if (!res || res.code) {
						uni.showToast({
							title: (res && res.msg) || '服务器正在维护中...',
							icon: 'none',
							position: 'top'
						})
						return
					}
					state.list = [...state.list, ...res.data]
				},
				// 复制话术到剪切板
				async copy(answer, item) {
					uni.setClipboardData({
						data: item.answer
					})
					if (!item.id) {
						return
					}
					let res = await api.loveChatScore({
						id: item.id
					})
				},
				// 标签点击
				tagClick(value) {
					state.searchValue = value
					methods.getLoveChat()
				},
				// 轮播图点击
				clickBanner(index) {
					// 跳转到内部窗口并且传递链接
					uni.navigateTo({
						url: `/component/WebView/WebView?url=${state.bannerList[index].hrefUrl}`
					})
				},
				// 清空输入框
				clear() {
					state.searchValue = ''
					state.list = []
				},
				tolower(e) {
					if (state.page > 10) {
						return
					}
					state.page++
					methods.getLoveChat()
				},

			})
			onMounted(async () => {
				// 获取剪切板内容
				uni.getClipboardData({
					success: function(res) {
						state.searchValue = res.data;
					}
				});
				// 获取banner
				let res = await api.getBanner()
				if (res.code) {
					return
				}
				state.bannerList = res.data.map(item => {
					return {
						image: item.imgUrl,
						...item,
					}
				})

				// 只在微信小程序才显示分享菜单
				// #ifdef MP-WEIXIN
				wx.showShareMenu({
					withShareTicket: true,
					menus: ['shareAppMessage', 'shareTimeline']
				})
				// #endif

			})
			return {
				...toRefs(state),
				...toRefs(methods)
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		background-color: #f5ffff;
		padding: 10px 18px 0;
		font-size: 15px;
		font-family: cursive;
		height: 100%;

		.search {
			padding-top: 18px;
		}

		.tag {
			position: absolute;
			z-index: 99;

			.tag-circle {
				padding: 10px;

				u-tag {
					margin-right: 35px;
				}
			}
		}

		.list {
			height: 65vh;
			// overflow-y: auto;
			margin-top: 10px;
			padding-top: 5px;
			padding-bottom: 30px;

			.item {
				box-shadow: 0 2px 6px 2px rgba(255, 0, 0, 0.3);
				padding: 8px 0 10px;
				line-height: 27px;
				background-color: #ffebeb;
				margin-bottom: 15px;
				border-radius: 8px;
				letter-spacing: 2px;

				.title {
					padding-left: 10px;

					.female {
						font-weight: 500;
						color: #DD6161;
						font-size: 19px;
					}
				}

				.answer {
					position: relative;
					padding: 0 50px 0 10px;

					.answerBtn {
						position: absolute;
						bottom: 0;
						right: 5px;
					}
				}
			}
		}
	}
</style>
